<template>
  <view class="emergency-page">
    <!-- 紧急功能入口 -->
    <view class="emergency-functions">
      <!-- 物业求助 -->
      <service-card
        title="物业求助"
        description="联系物业、报修服务"
        icon-name="phone"
        theme-color="#ff4757"
        @click="goToPropertyHelp"
      />

      <!-- 医疗急救 -->
      <service-card
        title="医疗急救"
        description="紧急医疗、救护车"
        icon-name="heart"
        theme-color="#ff4757"
        @click="goToMedicalHelp"
      />

      <!-- 消防求助 -->
      <service-card
        title="消防求助"
        description="火灾报警、消防求助"
        icon-name="fire"
        theme-color="#ff4757"
        @click="goToFireHelp"
      />

      <!-- 报警求助 -->
      <service-card
        title="报警求助"
        description="紧急报警、安全求助"
        icon-name="shield"
        theme-color="#ff4757"
        @click="goToPoliceHelp"
      />

      <!-- 一键定位 -->
      <service-card
        title="一键定位"
        description="发送位置、紧急定位"
        icon-name="location"
        theme-color="#3742fa"
        @click="sendLocation"
      />

      <!-- 求助记录 -->
      <service-card
        title="求助记录"
        description="查看历史求助记录"
        icon-name="list"
        theme-color="#9b59b6"
        @click="goToHelpRecords"
      />
    </view>
  </view>
</template>

<script setup>
/**
 * 紧急求助页面 - 重构版本
 * @author Wu.Liang
 * @date 2025-01-21
 * @version 2.0 - 按照ServiceCard组件规范重构
 */

import { ref, reactive, computed, onMounted } from 'vue'
import ServiceCard from '@/components/ServiceCard.vue'
import { getIconThemeColor } from '@/utils/themeColors'
import { hasMenuPermission } from '@/utils/permission'

// 紧急联系人
const emergencyContacts = ref([
  {
    id: 1,
    name: '张三',
    phone: '138****1234',
    relation: '家人'
  },
  {
    id: 2,
    name: '李四',
    phone: '139****5678',
    relation: '朋友'
  },
  {
    id: 3,
    name: '物业客服',
    phone: '400-123-4567',
    relation: '物业'
  }
])

// 求助记录
const helpRecords = ref([
  {
    id: 1,
    type: '物业求助',
    statusText: '已处理',
    statusType: 'success',
    time: '2025-01-21 14:30',
    description: '水管漏水，需要维修'
  },
  {
    id: 2,
    type: '医疗急救',
    statusText: '处理中',
    statusType: 'warning',
    time: '2025-01-21 16:00',
    description: '老人摔倒，需要医疗救助'
  },
  {
    id: 3,
    type: '一键定位',
    statusText: '已发送',
    statusType: 'info',
    time: '2025-01-20 20:30',
    description: '发送位置给紧急联系人'
  }
])

// 安全提示
const safetyTips = ref([
  {
    id: 1,
    content: '遇到紧急情况时，请保持冷静，及时拨打求助电话'
  },
  {
    id: 2,
    content: '定期检查紧急联系人信息，确保联系方式准确'
  },
  {
    id: 3,
    content: '熟悉小区内的安全出口和消防设施位置'
  },
  {
    id: 4,
    content: '如遇火灾，请立即拨打119，不要乘坐电梯'
  }
])

// 计算属性
const recentHelpRecords = computed(() => {
  return helpRecords.value.slice(0, 3) // 只显示最近3条记录
})

// 获取记录图标
const getRecordIcon = (type) => {
  const iconMap = {
    '物业求助': 'phone',
    '医疗急救': 'heart',
    '消防求助': 'fire',
    '报警求助': 'shield',
    '一键定位': 'location'
  }
  return iconMap[type] || 'help-circle'
}

// 页面跳转方法
const goToPropertyHelp = () => {
  uni.navigateTo({ url: '/pages/emergency/property-help' })
}

const goToMedicalHelp = () => {
  uni.navigateTo({ url: '/pages/emergency/medical-help' })
}

const goToFireHelp = () => {
  uni.navigateTo({ url: '/pages/emergency/fire-help' })
}

const goToPoliceHelp = () => {
  uni.navigateTo({ url: '/pages/emergency/police-help' })
}

const goToHelpRecords = () => {
  uni.navigateTo({ url: '/pages/emergency/help-records' })
}

// 紧急求助
const triggerEmergency = () => {
  uni.showModal({
    title: '紧急求助',
    content: '确定要发起紧急求助吗？',
    success: (res) => {
      if (res.confirm) {
        callEmergency()
        sendLocation()
      }
    }
  })
}

// 呼叫紧急联系人
const callEmergency = () => {
  const primaryContact = emergencyContacts.value[0]
  if (primaryContact) {
    uni.makePhoneCall({
      phoneNumber: primaryContact.phone,
      success: () => {
        uni.showToast({
          title: '正在呼叫紧急联系人',
          icon: 'success'
        })
      },
      fail: () => {
        uni.showToast({
          title: '呼叫失败',
          icon: 'none'
        })
      }
    })
  }
}

// 发送位置
const sendLocation = () => {
  uni.getLocation({
    type: 'gcj02',
    success: (res) => {
      const { latitude, longitude } = res
      // 这里应该调用API发送位置信息
      console.log('发送位置:', { latitude, longitude })
      uni.showToast({
        title: '位置已发送',
        icon: 'success'
      })
    },
    fail: () => {
      uni.showToast({
        title: '获取位置失败',
        icon: 'none'
      })
    }
  })
}

// 页面加载
onMounted(() => {
  // 加载紧急联系人数据
  loadEmergencyContacts()
  // 加载求助记录
  loadHelpRecords()
})

// 数据加载方法
const loadEmergencyContacts = async () => {
  try {
    // 这里应该调用实际的API
    console.log('加载紧急联系人')
  } catch (error) {
    console.error('加载紧急联系人失败:', error)
  }
}

const loadHelpRecords = async () => {
  try {
    // 这里应该调用实际的API
    console.log('加载求助记录')
  } catch (error) {
    console.error('加载求助记录失败:', error)
  }
}
</script>

<style lang="scss" scoped>
.emergency-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
  
  // 小屏幕适配
  @media screen and (max-width: 375px) {
    padding: 12px;
  }
  
  // 中等屏幕适配
  @media screen and (min-width: 376px) and (max-width: 768px) {
    padding: 16px;
  }
  
  // 大屏幕适配
  @media screen and (min-width: 769px) {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
  }
}

.emergency-functions {
  margin-bottom: 20px;
}
</style> 